<template>
  <div class="cont_scroll bg-c-white br-12 pl-26 pr-26 pb-44 pt-24">
    <div class="dia_header">
      <div class="fs-18 fw-600 card_title">账户安全</div>
    </div>
    <div class="d-flex mt-20" style="flex-wrap: wrap">
      <div class="w-552 pt-22 pl-22 pr-40 pb-16 mb-38 mt-24 settings-item">
        <div class="d-flex justify-content-between">
          <div>
            <div class="fs-18 lh-28 fw-600 c-333">修改登录密码</div>
            <div class="w-394 fs-12 lh-20 c-666 mt-6" style="height: 50px">
              密码至少八位数(密码需要包含数字大小写及符号)
            </div>
            <button
              class="mt-14 button-004 button-004--secondary"
              style="padding: 11px 32px"
              type="button"
              @click="showDialog('psd')"
            >
              修改密码
            </button>
          </div>
          <div class="right_img">
            <img alt="修改登录密码" :src="passwordImg" width="100%" />
          </div>
        </div>
      </div>
      <div class="w-552 pt-22 pl-22 pr-40 pb-16 mb-38 mt-24 settings-item">
        <div class="d-flex justify-content-between">
          <div>
            <div class="fs-18 lh-28 fw-600 c-333">修改手机号</div>
            <div class="w-394 fs-12 lh-20 c-666 mt-6" style="height: 50px">
              您已绑定手机号：+86 {{ userInfo.nickname }}
            </div>
            <button
              class="mt-14 button-004 button-004--secondary"
              style="padding: 11px 32px"
              type="button"
              @click="showDialog('phone')"
            >
              修改手机号
            </button>
          </div>
          <div class="right_img">
            <img alt="修改手机号" :src="phoneImg" width="100%" />
          </div>
        </div>
      </div>

      <div class="w-552 pt-22 pl-22 pr-40 pb-16 mb-38 mt-24 settings-item">
        <div class="d-flex justify-content-between">
          <div>
            <div class="fs-18 lh-28 fw-600 c-333">修改支付密码</div>
            <div class="w-394 fs-12 lh-20 c-666 mt-6" style="height: 50px">
              密码至少八位数(密码需要包含数字大小写及符号)
            </div>
            <button
              class="mt-14 button-004 button-004--secondary"
              style="padding: 11px 32px"
              type="button"
              @click="showDialog('pay')"
            >
              修改支付密码
            </button>
          </div>
          <div class="right_img">
            <img alt="修改支付密码" :src="passwordImg" width="100%" />
          </div>
        </div>
      </div>

      <div
        v-if="false"
        class="w-552 pt-22 pl-22 pr-40 pb-16 mb-38 mt-24 settings-item"
      >
        <div class="d-flex justify-content-between">
          <div>
            <div class="fs-18 lh-28 fw-600 c-333">管理员操作日志</div>
            <div class="w-394 fs-12 lh-20 c-666 mt-6" style="height: 50px">
              可查看管理员对全球派账户进行的关键操作记
            </div>
            <button
              class="mt-14 button-004 button-004--secondary"
              style="padding: 11px 32px"
              type="button"
            >
              查看日志
            </button>
          </div>
          <div class="right_img">
            <img alt="查看日志" :src="adminLogImg" width="100%" />
          </div>
        </div>
      </div>

      <!--<div class="w-552 pt-22  pl-22 pr-40 pb-16 mb-38 settings-item">
            <div class="d-flex justify-content-between">
                <div>
                    <div class="fs-18 lh-28 fw-600 c-333">账户管理员设置</div>
                    <div class="w-394 fs-12 lh-20 c-666 mt-6">可添加企业员工为全球派账户管理员，并设置</div>
                    <button
                        type="button"
                        class="mt-14 button-004 button-004&#45;&#45;secondary"
                        style="padding: 11px 32px"
                        @click="toPage('/app/settings/admin')"
                    >设置管理员
                    </button>
                </div>
                <div class="right_img mt-7">
                    <img :src="passwordImg"  alt="修改登录密码"  width="100%"  />
                </div>
            </div>
        </div>
        <div class="w-552 pt-22  pl-22 pr-40 pb-16 mb-38 settings-item">
            <div class="d-flex justify-content-between">
                <div>
                    <div class="fs-18 lh-28 fw-600 c-333">管理员操作日志</div>
                    <div class="w-394 fs-12 lh-20 c-666 mt-6">可查看管理员对全球派账户进行的关键操作记</div>
                    <button
                        type="button"
                        class="mt-14 button-004 button-004&#45;&#45;secondary"
                        style="padding: 11px 32px"
                        @click="toPage('/app/settings/log')"
                    >查看日志
                    </button>
                </div>
                <div class="right_img mt-7">
                    <img :src="passwordImg"  alt="修改登录密码"  width="100%"  />
                </div>
            </div>
        </div>-->
    </div>
    <!-- 修改密码 -->
    <hsk-dialog
      :center="false"
      :close-on-click-modal="false"
      :confirm-loading="confirmLoading"
      custom-class="custom-dialog"
      :show-footer="false"
      title="修改密码"
      :visible.sync="dialogChangePwd"
      :width="dialogWidth"
    >
      <el-form ref="psdForm" :model="psdForm" :rules="psdRules">
        <el-form-item class="mb-0 mt-18 w-full">
          <template #label>
            <div class="d-flex">
              <div class="fs-14 lh-20 fw-600 c-333 red_dot mb-10">手机号</div>
            </div>
          </template>
          <el-input v-model="psdForm.phone" class="input_vaild" disabled />
        </el-form-item>
        <el-form-item class="mb-0 mt-18 w-full">
          <div class="fs-14 lh-20 fw-600 c-333 red_dot mb-10">验证码</div>
          <el-row>
            <el-col :span="18">
              <el-input
                v-model="psdForm.captcha"
                class="input_vaild"
                placeholder="请输入手机验证码"
              />
            </el-col>
            <el-col :span="6">
              <el-button
                class="el-button button-004--primary code_btn"
                :disabled="totalNum < 60"
              >
                <span @click="getCaptcha">{{ str }}</span>
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item class="mb-0 mt-18 w-full">
          <template #label>
            <div class="d-flex">
              <div class="fs-14 lh-20 fw-600 c-333 red_dot mb-10">
                新登录密码
              </div>
            </div>
          </template>
          <el-input
            v-model="psdForm.new_pwd"
            placeholder="请设置您的新登录密码"
            show-password
          />
        </el-form-item>
        <el-form-item class="mb-0 mt-18 w-full">
          <template #label>
            <div class="d-flex">
              <div class="fs-14 lh-20 fw-600 c-333 red_dot mb-10">
                确认新登录密码
              </div>
            </div>
          </template>
          <el-input
            v-model="psdForm.confirm_pwd"
            placeholder="请再次确认您的新登录密码"
            show-password
          />
        </el-form-item>
        <el-form-item>
          <button
            class="mt-78 button-004 button-004--primary button-004--large w-340 btn_use"
          >
            <span @click="confirmChangePsd">确认修改</span>
          </button>
        </el-form-item>
      </el-form>
    </hsk-dialog>
    <!-- 修改手机号 -->
    <hsk-dialog
      :center="false"
      :close-on-click-modal="false"
      :confirm-loading="confirmLoading"
      custom-class="custom-dialog"
      :show-footer="false"
      title="修改手机号"
      :visible.sync="dialogChangePhone"
      :width="dialogWidth"
    >
      <el-form ref="phoneForm" :model="phoneForm" :rules="phoneRules">
        <el-form-item class="mb-0 mt-18 w-full">
          <template #label>
            <div class="d-flex">
              <div class="fs-14 lh-20 fw-600 c-333 red_dot mb-10">手机号</div>
            </div>
          </template>
          <el-input
            v-model="phoneForm.phone"
            class="input_vaild"
            disabled
            placeholder="请输入手机号"
          />
        </el-form-item>
        <el-form-item class="mb-0 mt-18 w-full">
          <div class="fs-14 lh-20 fw-600 c-333 red_dot mb-10">验证码</div>
          <el-row>
            <el-col :span="18">
              <el-input
                v-model="phoneForm.captcha"
                class="input_vaild"
                placeholder="请输入手机验证码"
              />
            </el-col>
            <el-col :span="6">
              <el-button
                class="el-button button-004--primary code_btn"
                :disabled="totalNum1 < 60"
              >
                <span @click="getCaptchaByPhone">{{ str1 }}</span>
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item class="mb-0 mt-18 w-full">
          <template #label>
            <div class="d-flex">
              <div class="fs-14 lh-20 fw-600 c-333 red_dot mb-10">新手机号</div>
            </div>
          </template>
          <el-input
            v-model="phoneForm.new_mobile"
            placeholder="请输入您的新手机号"
          />
        </el-form-item>
        <el-form-item class="mb-0 mt-18 w-full">
          <div class="fs-14 lh-20 fw-600 c-333 red_dot mb-10">新手机验证码</div>
          <el-row>
            <el-col :span="18">
              <el-input
                v-model="phoneForm.new_captcha"
                class="input_vaild"
                placeholder="请输入手机验证码"
              />
            </el-col>
            <el-col :span="6">
              <el-button
                class="el-button button-004--primary code_btn"
                :disabled="totalNum2 < 60"
              >
                <span @click="getCaptchaByPhone1">{{ str2 }}</span>
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <button
            class="mt-78 button-004 button-004--primary button-004--large w-340 btn_use"
          >
            <span @click="confirmChangePhone">确认修改</span>
          </button>
        </el-form-item>
      </el-form>
    </hsk-dialog>
    <!-- 修改支付密码 -->
    <hsk-dialog
      :center="false"
      :close-on-click-modal="false"
      :confirm-loading="confirmLoading"
      custom-class="custom-dialog"
      :show-footer="false"
      title="修改支付密码"
      :visible.sync="dialogChangePay"
      :width="dialogWidth"
    >
      <el-form ref="payForm" :model="payForm" :rules="payRules">
        <el-form-item class="mb-0 mt-18 w-full">
          <template #label>
            <div class="d-flex">
              <div class="fs-14 lh-20 fw-600 c-333 red_dot mb-10">手机号</div>
            </div>
          </template>
          <el-input v-model="payForm.phone" class="input_vaild" disabled />
        </el-form-item>
        <el-form-item class="mb-0 mt-18 w-full">
          <div class="fs-14 lh-20 fw-600 c-333 red_dot mb-10">验证码</div>
          <el-row>
            <el-col :span="18">
              <el-input
                v-model="payForm.captcha"
                class="input_vaild"
                placeholder="请输入手机验证码"
              />
            </el-col>
            <el-col :span="6">
              <el-button
                class="el-button button-004--primary code_btn"
                :disabled="totalNum3 < 60"
              >
                <span @click="getCaptchaByPay">{{ str3 }}</span>
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item class="mb-0 mt-18 w-full">
          <template #label>
            <div class="d-flex">
              <div class="fs-14 lh-20 fw-600 c-333 red_dot mb-10">
                新支付密码
              </div>
            </div>
          </template>
          <el-input
            v-model="payForm.new_pwd"
            placeholder="请设置您的新支付密码"
            show-password
          />
        </el-form-item>
        <el-form-item class="mb-0 mt-18 w-full">
          <template #label>
            <div class="d-flex">
              <div class="fs-14 lh-20 fw-600 c-333 red_dot mb-10">
                确认新支付密码
              </div>
            </div>
          </template>
          <el-input
            v-model="payForm.confirm_pwd"
            placeholder="请再次确认您的新支付密码"
            show-password
          />
        </el-form-item>
        <el-form-item>
          <button
            class="mt-78 button-004 button-004--primary button-004--large w-340 btn_use"
          >
            <span @click="confirmChangePaypwd">确认修改</span>
          </button>
        </el-form-item>
      </el-form>
    </hsk-dialog>
  </div>
</template>

<script>
  import { toLoginRoute } from '@/utils/routes'
  import adminImg from '@/assets/image/setting-admin.png'
  import logImg from '@/assets/image/setting-log.png'
  import passwordImg from '@/assets/image/xiugaimima.png'
  import phoneImg from '@/assets/image/xiugaishoujihao.png'
  import adminLogImg from '@/assets/image/adminLogImg.png'
  import { mapActions, mapGetters } from 'vuex'
  import { getCaptcha, changePsd, changePhone, changePaypwd } from '@/api/user'
  import throttle from '@/utils/throttle'
  export default {
    components: {},
    data() {
      //这里存放数据
      return {
        totalNum: 60,
        str: '获取验证码',
        totalNum1: 60,
        str1: '获取验证码',
        totalNum2: 60,
        str2: '获取验证码',
        totalNum3: 60,
        str3: '获取验证码',
        dialogWidth: '450px',
        adminImg,
        logImg,
        passwordImg,
        phoneImg,
        adminLogImg,
        confirmLoading: true,
        dialogChangePwd: false, // 修改密码
        dialogChangePhone: false, // 修改手机号
        dialogChangePay: false, // 修改支付密码
        psdForm: {},
        psdRules: {},
        phoneForm: {},
        phoneRules: {},
        payForm: {},
        payRules: {},
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'user/userinfo',
      }),
      ...mapActions({
        _logout: 'user/logout',
      }),
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
      // 弹框
      showDialog(data) {
        if (data === 'psd') {
          this.dialogChangePwd = true
          this.psdForm.phone = this.userInfo.username
        } else if (data === 'phone') {
          this.dialogChangePhone = true
          this.phoneForm.phone = this.userInfo.username
        } else if (data === 'pay') {
          this.dialogChangePay = true
          this.payForm.phone = this.userInfo.username
        }
      },
      // 获取验证码_修改密码
      getCaptcha: throttle(async function () {
        const data = {
          mobile: this.psdForm.phone,
          event: 'change_pwd',
        }
        const { code, msg } = await getCaptcha(data)
        if (code === 1) {
          const clock = window.setInterval(() => {
            this.str = this.totalNum + 's后重新发送'
            this.totalNum -= 1
            if (this.totalNum < 0) {
              this.totalNum = 60
              this.str = '发送验证码'
              window.clearInterval(clock)
            }
          }, 1000)
          this.$message.success(msg)
        } else {
          this.$message.warning(msg)
        }
      }, 1000),
      // 获取验证码_修改手机号
      getCaptchaByPhone: throttle(async function () {
        const data = {
          mobile: this.phoneForm.phone,
          event: 'change_pwd',
        }
        const { code, msg } = await getCaptcha(data)
        if (code === 1) {
          const clock = window.setInterval(() => {
            this.str1 = this.totalNum1 + 's后重新发送'
            this.totalNum1 -= 1
            if (this.totalNum1 < 0) {
              this.totalNum1 = 60
              this.str1 = '发送验证码'
              window.clearInterval(clock)
            }
          }, 1000)
          this.$message.success(msg)
        } else {
          this.$message.warning(msg)
        }
      }, 1000),
      // 获取验证码_新手机号
      getCaptchaByPhone1: throttle(async function () {
        const data = {
          mobile: this.phoneForm.new_mobile,
          event: 'change_pwd',
        }
        const { code, msg } = await getCaptcha(data)
        if (code === 1) {
          const clock = window.setInterval(() => {
            this.str2 = this.totalNum2 + 's后重新发送'
            this.totalNum2 -= 1
            if (this.totalNum2 < 0) {
              this.totalNum2 = 60
              this.str2 = '发送验证码'
              window.clearInterval(clock)
            }
          }, 1000)
          this.$message.success(msg)
        } else {
          this.$message.warning(msg)
        }
      }, 1000),
      // 获取验证码_修改支付密码
      getCaptchaByPay: throttle(async function () {
        const data = {
          mobile: this.payForm.phone,
          event: 'change_pwd',
        }
        const { code, msg } = await getCaptcha(data)
        if (code === 1) {
          const clock = window.setInterval(() => {
            this.str3 = this.totalNum3 + 's后重新发送'
            this.totalNum3 -= 1
            if (this.totalNum3 < 0) {
              this.totalNum3 = 60
              this.str3 = '发送验证码'
              window.clearInterval(clock)
            }
          }, 1000)
          this.$message.success(msg)
        } else {
          this.$message.warning(msg)
        }
      }, 1000),
      // 确认修改密码
      async confirmChangePsd() {
        const data = {
          captcha: this.psdForm.captcha,
          new_pwd: this.psdForm.new_pwd,
          confirm_pwd: this.psdForm.confirm_pwd,
        }
        const { code, msg } = await changePsd(data)
        if (code === 1) {
          this.$message.success(msg)
          this.dialogChangePwd = false
          this.logout()
        } else {
          this.$message.error(msg)
        }
      },
      // 确认修改手机号
      async confirmChangePhone() {
        const data = {
          captcha: this.phoneForm.captcha,
          new_mobile: this.phoneForm.new_mobile,
          new_captcha: this.phoneForm.new_captcha,
        }
        const { code, msg } = await changePhone(data)
        if (code === 1) {
          this.$message.success(msg)
          this.dialogChangePhone = false
          this.logout()
        } else {
          this.$message.error(msg)
        }
      },
      // 确认修改支付密码
      async confirmChangePaypwd() {
        const data = {
          captcha: this.payForm.captcha,
          new_pwd: this.payForm.new_pwd,
          confirm_pwd: this.payForm.confirm_pwd,
        }
        const { code, msg } = await changePaypwd(data)
        if (code === 1) {
          this.$message.success(msg)
          this.dialogChangePay = false
        } else {
          this.$message.error(msg)
        }
      },
      // 退出登录
      async logout() {
        await this._logout()
        await this.$router.push(toLoginRoute(this.$route.fullPath))
      },
    },
  }
</script>
<style lang="scss" scoped>
  .cont_scroll {
    height: 100%;
    overflow-y: scroll;
  }
  .dia_header {
    display: flex;
    align-items: center;
    padding-bottom: 24px;
    border-bottom: 1px solid #f3f3f3;
  }
  .card_title {
    padding-left: 10px;
    color: #333;
    border-left: 4px solid #6b1ce9;
  }
  .settings-item {
    margin-right: 38px;
    background: #f3f4f5;
    border-radius: 18px;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 14px 0px;
    transition: all 0.3s ease 0s;

    &:hover {
      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 14px 0px;
    }
  }
  .right_img {
    width: 80px;
    height: 80px;
    margin-top: 20px !important;
    border-radius: 50%;
  }
  .btn_use {
    display: block;
    height: 54px;
    margin: 0 auto;
  }
  .code_btn {
    height: 35px;
    border-radius: 5px;
    text-align: center;
    background-color: #6b1ce9 !important;
  }
  ::v-deep .el-input__inner {
    color: #000;
    background-color: #f7fafc;
    border: none;
    border-radius: 10px;
  }
</style>
